import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:toast/toast.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class CommunityTopicInfoController extends GetxController {
  RxBool isFollow = false.obs;

  RxBool isPavilion = false.obs;

  RxInt like = 78.obs;

  RxBool isLike = false.obs;
}

class CommunityTopicInfoPage extends GetView<CommunityTopicInfoController> {
  const CommunityTopicInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '社区',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(bottom: 30),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Wrap(
                    spacing: 10,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(5.r),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i4/417920244/O1CN014w2i971DfnQ8Hw2J9_!!417920244.jpg_320x320q90.jpg_.webp',
                          width: 40,
                          height: 40,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Text(
                        '青山美馆',
                        style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w500, color: ColorsUtils.color3333),
                      )
                    ],
                  ),
                  Obx(() => TextButton(
                      onPressed: () {
                        controller.isFollow.value = !controller.isFollow.value;
                      },
                      style: ButtonStyle(
                          minimumSize: const MaterialStatePropertyAll(Size(90, 30)),
                          shape: MaterialStatePropertyAll(
                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15))),
                          alignment: Alignment.center,
                          backgroundColor: MaterialStatePropertyAll(
                              ColorsUtils.parseColorFromHexString(controller.isFollow.isFalse
                                  ? ColorsUtils.colorF048
                                  : ColorsUtils.colorCccc))),
                      child: Text.rich(getActivate(controller.isFollow.value))))
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              alignment: Alignment.centerLeft,
              child: Text(
                '买家秀灰色沙发 蓝白地毯 毫无违和感',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              alignment: Alignment.centerLeft,
              child: Text(
                '372阅读',
                style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize12, color: ColorsUtils.color9999),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              alignment: Alignment.centerLeft,
              child: Text(
                '#买家秀#',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 15, top: 35),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://gw.alicdn.com/imgextra/i1/6000000007591/O1CN01HUQFw925wjRmmddcI_!!6000000007591-2-at.png_560x370Q50s50.jpg_.webp',
                  width: 110,
                  height: 95,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 15, top: 15),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://gw.alicdn.com/imgextra/i2/6000000003637/O1CN01G03Y871cjnKKKOHuB_!!6000000003637-2-at.png_560x370Q50s50.jpg_.webp',
                  width: 110,
                  height: 95,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 20, top: 20),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://img.alicdn.com/imgextra/i1/O1CN01If1Bkh1DPJKNs1mbo_!!6000000000208-0-tps-536-630.jpg_960x960Q50s50.jpg_.webp',
                  width: 303,
                  height: 163,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 20, top: 20),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://img.alicdn.com/imgextra/i1/O1CN01hBin1s1HHlG7WolMX_!!6000000000733-0-tps-536-630.jpg_960x960Q50s50.jpg_.webp',
                  width: 303,
                  height: 163,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 20, top: 20),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://img.alicdn.com/imgextra/i1/O1CN01gObK101VwtOLWNkp3_!!6000000002718-0-tps-536-630.jpg_960x960Q50s50.jpg_.webp',
                  width: 303,
                  height: 163,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 30),
              alignment: Alignment.center,
              child: Container(
                constraints: const BoxConstraints.expand(width: 320, height: 80),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      constraints: const BoxConstraints.expand(width: 80, height: 80),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(5.r), bottomLeft: Radius.circular(5.r)),
                          image: const DecorationImage(
                              fit: BoxFit.fill,
                              image: NetworkImage(
                                  'https://img.alicdn.com/imgextra/i3/O1CN01rPtZRi1vh1jzxYW2A_!!6000000006203-0-tps-536-630.jpg_960x960Q50s50.jpg_.webp'))),
                    ),
                    Expanded(
                        child: Container(
                      padding: const EdgeInsets.only(left: 10, top: 5, right: 15),
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(5.r), bottomRight: Radius.circular(5.r))),
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.topLeft,
                            child: Text(
                              '青山美宿北欧蓝天白雪民族风现代化简约设计卧室房间客厅地',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, lineHeight: 1.35.h),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 5),
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 10,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.start,
                              children: [
                                Text(
                                  '￥304',
                                  style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorF95e,
                                  ),
                                ),
                                SvgUtils.assetName('u11114', width: 20, height: 20)
                              ],
                            ),
                          )
                        ],
                      ),
                    ))
                  ],
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(top: 35, bottom: 10),
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5.r),
                child: CachedNetworkImage(
                  imageUrl:
                      'https://gw.alicdn.com/imgextra/i2/6000000002841/O1CN01HeIV8O1WrE6VAsW71_!!6000000002841-2-at.png_560x370Q50s50.jpg_.webp',
                  width: 82,
                  height: 82,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              child: Text(
                '青山美术馆',
                style: StylesUtils.customTextStyle(
                    color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize18),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              alignment: Alignment.center,
              child: Text(
                '2546粉丝',
                style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color9999,
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              alignment: Alignment.center,
              child: Wrap(
                spacing: 20,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.spaceBetween,
                children: [
                  TextButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          alignment: Alignment.center,
                          minimumSize: const MaterialStatePropertyAll(Size(90, 30)),
                          fixedSize: const MaterialStatePropertyAll(Size(90, 30)),
                          shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(15),
                              side: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString(
                                      ColorsUtils.colorF048))))),
                      child: Text(
                        '主页',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorF048, fontSize: StylesUtils.fontSize12),
                      )),
                  Obx(() => TextButton(
                      onPressed: () {
                        controller.isPavilion.value = !controller.isPavilion.value;
                      },
                      style: ButtonStyle(
                          minimumSize: const MaterialStatePropertyAll(Size(90, 30)),
                          fixedSize: const MaterialStatePropertyAll(Size(90, 30)),
                          shape: MaterialStatePropertyAll(
                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15))),
                          alignment: Alignment.center,
                          backgroundColor: MaterialStatePropertyAll(
                              ColorsUtils.parseColorFromHexString(controller.isPavilion.isFalse
                                  ? ColorsUtils.colorF048
                                  : ColorsUtils.colorCccc))),
                      child: Text.rich(getActivate(controller.isPavilion.value))))
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Container(
          height: 50,
          color: Colors.white,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                  child: Row(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 15),
                    child: Text.rich(TextSpan(children: [
                      WidgetSpan(
                          child: SvgUtils.assetName('u11130', width: 20, height: 20),
                          alignment: PlaceholderAlignment.middle),
                      TextSpan(
                          text: ' 708',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize16))
                    ])),
                  ),
                  Container(
                      padding: const EdgeInsets.only(left: 40),
                      alignment: Alignment.centerLeft,
                      child: InkWell(
                        onTap: () {
                          Get.toNamed(RoutePath.communityTopicComment);
                        },
                        child: Text.rich(TextSpan(children: [
                          WidgetSpan(
                              child: SvgUtils.assetName('u11137', width: 23, height: 20),
                              alignment: PlaceholderAlignment.middle),
                          TextSpan(
                              text: ' 27',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize16))
                        ])),
                      )),
                  Container(
                      padding: const EdgeInsets.only(left: 30),
                      alignment: Alignment.centerLeft,
                      child: Obx(() => InkWell(
                            onTap: () {
                              ToastContext().init(context);
                              controller.isLike.value = !controller.isLike.value;
                              Toast.show(controller.isLike.isTrue ? '收藏成功' : '取消收藏',
                                  duration: 2,
                                  gravity: Toast.center,
                                  backgroundRadius: 5,
                                  rootNavigator: false,
                                  webShowClose: true,
                                  webTexColor: Colors.white);
                              if (controller.isLike.isTrue) {
                                controller.like++;
                                return;
                              }
                              controller.like--;
                            },
                            child: Text.rich(TextSpan(children: [
                              WidgetSpan(
                                  child: SvgUtils.assetName(
                                      controller.isLike.isTrue ? 'u11143_selected' : 'u11143',
                                      width: 20,
                                      height: 20),
                                  alignment: PlaceholderAlignment.middle),
                              TextSpan(
                                  text: ' ${controller.like.value}',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666,
                                      fontSize: StylesUtils.fontSize16))
                            ])),
                          ))),
                ],
              )),
              TextButton(
                  onPressed: () {},
                  style: ButtonStyle(
                      minimumSize: const MaterialStatePropertyAll(Size(127, 50)),
                      fixedSize: const MaterialStatePropertyAll(Size(127, 50)),
                      alignment: Alignment.center,
                      backgroundColor: MaterialStatePropertyAll(
                          ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                      shape: const MaterialStatePropertyAll(LinearBorder())),
                  child: Text.rich(TextSpan(children: [
                    WidgetSpan(
                        child: SvgUtils.assetName('u11149', width: 24, height: 20),
                        alignment: PlaceholderAlignment.middle),
                    TextSpan(text: '  去购买', style: StylesUtils.customTextStyle())
                  ])))
            ],
          ),
        ),
      ),
    );
  }

  InlineSpan getActivate(bool value) {
    if (value) {
      return TextSpan(children: [
        WidgetSpan(
            child: SvgUtils.assetName('u11093', width: 12, height: 12),
            alignment: PlaceholderAlignment.middle),
        TextSpan(
            text: '  已关注', style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12))
      ]);
    }
    return TextSpan(children: [
      WidgetSpan(
          child: SvgUtils.assetName('u11091', width: 12, height: 12),
          alignment: PlaceholderAlignment.middle),
      TextSpan(text: '  关注', style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12))
    ]);
  }
}
